Other than the Space Blogroll, I have removed most of the space-related things from the sidebar. They are all still available on the Space Feeds aggregator, so I figured they were redundant here. I have removed quite a few buttons from the sidebar, and added a couple buttons (Blogburst, AddThis, and the Darkgate Comic Slurper) as well. I have also removed some cartoons that haven't updated in a while.
Early on in my blogging days, I was messing around with the template and I accidentally erased the portion of the template that displays post titles. Ever since then I have made do by repeating the title of the post in boldface at the top of every post. I finally decided to fix that, giving a nice large blue title to each blog post. Of course, now that means I am going to have to go back through over 900 blog posts and eliminate the boldface-repeated-title from each one, as I have already done for the posts you see here on the main page. I figure that is probably going to be about five or six hours of work, yay.
But, these sorts of things are a trivial change here. I've done a number of such changes over the years.
The biggest change is probably not immediately apparent. Oh, sure, you've probably already noticed that I have changed the title section to an image. But there is something special about this image.
Resize your browser.
Pretty nifty, huh? The image stretches or contracts according to however wide you have set your browser. You will notice that the text in blog posts also stretches to fit, and if you look down the page and keep resizing, you'll see that the Sudoku puzzle area and the Station V3 comic also resize according to browser width.
I haven't checked it on all browsers, but it works in Opera 9.02, Firefox 2.0.0.2, and Internet Explorer 6. I have no idea if it works on other browsers, so if anyone reading this is on a Mac or using some other browser, please leave a comment telling me if this works for you.
The technique is called Elastic Design. I have long wanted to do this. Some people have much larger displays than others, and some are still using 800x600 displays. If someone has, say, a 1280x800 display, and the a website has a fixed width slightly smaller than 800 pixels (to allow for an 800x600 display with a vertical scrollbar on the right), then there is a lot of white space on the right hand side of the display for users with larger screens. However, if one wants to design the website so that it is viewable to almost all users without using horizontal scrolling, and one is stuck with a fixed-width website, then that whitespace must simply be accepted.
Elastic design allows us to get around this problem. With elastic design, it doesn't matter what size display the user has, or whether the user resizes their browser - the page simply adapts to fit the browser window.
Now, I did a lot of Googling over the last few days, trying to find out how to do this. Although the elastic text part was pretty easy, it was damn near impossible to find out how to do elastic images. I probably would have given up too - most sites that talked about this topic either had some very difficult code to implement, involving lots of javascript tricks and storage of multiple copies of the desired image, or else simply said that this was impossible - however, the Station V3 cartoon pretty much pushed me to keep trying.
The image for Station V3 is set at 750 pixels wide. My sidebar has a width of 160 pixels, with padding of five pixels on the left and ten more on the right, so if I wanted to show Station V3 at full size, my blog would need to be at least 925 pixels wide. My display is only 1024 pixels wide, so that would mean that I couldn't have my Favorites list up in IE6 without having a horizontal scroll bar on the page. Up until now, my solution was to have the width of the Station V3 image set at 630 pixels. This was not an optimal solution though, as the text in the comic was at times difficult to read, and it meant that anyone using an 800x600 screen was still stuck with a horizontal scrollbar.
So I kept plugging away and plugging away at it. Sometimes I would think I had found the solution, only to try it in another browser and see that nope, it didn't work. I also noticed in my searches on how to do this that quite a few other people had been looking for the same thing. So, now that I finally have something that works in several browsers, I figured I'd share the technique with the world. Hopefully anyone else who wants to do Elastic Design on their blog will find this right away and won't have to go through hours and hours of fruitless searching.
The basic template for this blog is the Minima design by Douglas Bowman of Stopdesign. The formatting in the text areas below has been altered - I have removed all the line breaks that Douglas Bowman had in there. In the template itself the line breaks are necessary for readability, but if I copied the code straight into the text areas there would be all sorts of < br> tags that shouldn't be there. One can cut and paste the following code straight into one's blog template, but line breaks should be reinserted as necessary to increase readability.
The first modification was in the Style section of the template (between the <style> and </style> tags):
The width:* commands in this style section allow the elastic sizing of the text in blog posts; these basically set the width to "whatever is available". The #content part is for the entire blog, and the #main part is for the section with all the blog posts and title and so on. The top:35px for the #main and #sidebar sections allow room for the Blogger Navbar at the top of the page.
Next, I had to make up a new division tag, also in the Style section:
I'll explain this in a minute.
Normally on the Minima blog template, there is a "header" section immediately after the body tag:
I wanted to replace this header section, which normally just had plain text, with my fancy new image. To do that I had to get rid of that entire <div id="header"> ... </div> section. Then, immediately following the main and main2 <div> tags, in the main content part of the blog, I inserted the following:
The first thing to note here is the <div id="variablewidthimage"> tag. This is the tag that I defined above in the Style section, which set the width at 75%. This sets the width of the division at 75% of the browser width. I figured that the minimum size browser screen would be 750 pixels wide, for an 800x600 display with a vertical scrollbar on the right. I knew that my sidebar plus padding would take up 175 pixels, which is a little over 23% of the width of a 750 pixel wide display, so that 75% wide division is wide enough to take up the rest of the width of the display without running over the sidebar, and also gives just a little bit of padding on the outside. If my sidebar took up 250 pixels including padding, and I was again assuming a minimum browser width of 750 pixels, then in the Style section I would have set the width of the variablewidthimage division tag to some percentage slightly smaller than 66%, probably somewhere from 60% to 65%.
The next thing to note is that I used the <center> tag both inside and outside the <div> tags. The center tag on the outside centers the division within the main section of the blog, and the center tag on the inside of the division centers the image within the division.
I did the same thing with Station V3:
Both my title image and the Station V3 image have a width="100%" command inside the <img> tags. This tells the browser to display the image at 100% of the division width, not 100% of the original image size.
The original image width for my title graphic is 625 pixels, and the original image width for Station V3 is 750 pixels. Both of these images are displayed at the same size on the blog though, whatever corresponds to 75% of the width of the browser window. It doesn't matter if the available area is smaller or bigger than either original image; they are both either shrunken or stretched to fit. Figuring this out was a huge headache - and hence this lengthy blog post so nobody else has to go through that same headache.
Stretching the Sudoku puzzle section was quite a bit easier. The Sudoku puzzle is in a table, and rather than having a set width to the table like I used to (i.e. <table width="650">) I simply left the width part out (ie <table>). The table expanded to fit the width of the main part of the blog, as defined in the Style section above.
That's it, that's all there is to it. I hope you like it.
If this is your first time here - maybe you came here via a Google search looking for how to do elastic images or elastic design - then you might also be interested in the method used to do the scrolling blogrolls in the sidebar. You can find the necessary code for that here.
Update: whoops, for some bizarre reason, comments and backlinks were turned off for this post. Fixed now.
Update 2: OK, now this is bizarre. I was looking through this code months later and I noticed something strange. Immediately prior to the #variablewidthimage declaration in my style section, there was an extra closing brace } all by itself, with no corresponding opening brace; that is an html error. When I took that brace out, the elastic images no longer worked in all browsers. You read that right: I had to introduce an html error to get this to work in all browsers. That freaked me out. It shouldn't work at all! But it does. I did this a little differently - without html errors - in my Space Feeds aggregator; that method uses tables though. If you want to see how I do it there, just click on over and View Source.
No comments:
Post a Comment